<template>
  <div class="app-container">
    <el-form :inline="true" :model="queryParams" class="query-form">
      <el-form-item label="手机号">
        <el-input v-model.trim="queryParams.phone" placeholder="请输入手机号" style="width: 200px" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="身份类型">
        <el-select v-model="queryParams.userType" placeholder="请选择" clearable style="width: 160px">
          <el-option label="租户" value="TENANT" />
          <el-option label="房东" value="LANDLORD" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 160px">
          <el-option label="待审核" value="PENDING" />
          <el-option label="已通过" value="APPROVED" />
          <el-option label="已驳回" value="REJECTED" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="list" border>
      <el-table-column prop="profileId" label="编号" width="80" />
      <el-table-column prop="userId" label="用户ID" width="100" />
      <el-table-column prop="userType" label="身份" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.userType === 'LANDLORD'" type="warning">房东</el-tag>
          <el-tag v-else type="success">租户</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="realName" label="姓名" width="140" />
      <el-table-column prop="phone" label="手机号" width="160" />
      <el-table-column prop="status" label="状态" width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 'APPROVED'" type="success">已通过</el-tag>
          <el-tag v-else-if="scope.row.status === 'REJECTED'" type="danger">已驳回</el-tag>
          <el-tag type="info">待审核</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="submitTime" label="提交时间" width="180" />
      <el-table-column prop="auditRemark" label="备注" min-width="180" show-overflow-tooltip />
      <el-table-column label="操作" fixed="right" width="120">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog :title="detailTitle" :visible.sync="detailVisible" width="600px">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="编号">{{ detail.profile.profileId }}</el-descriptions-item>
        <el-descriptions-item label="用户ID">{{ detail.profile.userId }}</el-descriptions-item>
        <el-descriptions-item label="身份">{{ detail.profile.userType === 'LANDLORD' ? '房东' : '租户' }}</el-descriptions-item>
        <el-descriptions-item label="真实姓名">{{ detail.profile.realName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ detail.profile.phone || '-' }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ translateStatus(detail.profile.status) }}</el-descriptions-item>
        <el-descriptions-item label="提交时间">{{ detail.profile.submitTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="审核备注">{{ detail.profile.auditRemark || '-' }}</el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="left">附件列表</el-divider>
      <el-table :data="detail.materials" size="small" border>
        <el-table-column prop="fileName" label="文件名" min-width="200" show-overflow-tooltip />
        <el-table-column prop="bizType" label="类型" width="140" />
        <el-table-column prop="createTime" label="上传时间" width="180" />
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="mini" :href="scope.row.fileUrl" target="_blank">预览</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { listMiniProfile, getMiniProfile } from '@/api/system/miniProfile'

export default {
  name: 'MiniProfile',
  data() {
    return {
      loading: false,
      list: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        phone: undefined,
        userType: undefined,
        status: undefined
      },
      detailVisible: false,
      detailTitle: '资料详情',
      detail: {
        profile: {},
        materials: []
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.loading = true
      try {
        const res = await listMiniProfile(this.queryParams)
        this.list = res.rows || []
        this.total = res.total || 0
      } finally {
        this.loading = false
      }
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        phone: undefined,
        userType: undefined,
        status: undefined
      }
      this.getList()
    },
    async handleView(row) {
      const res = await getMiniProfile(row.profileId)
      const data = res.data || {}
      this.detail = {
        profile: data.profile || {},
        materials: data.materials || []
      }
      this.detailVisible = true
    },
    translateStatus(status) {
      if (status === 'APPROVED') return '已通过'
      if (status === 'REJECTED') return '已驳回'
      return '待审核'
    }
  }
}
</script>

<style scoped>
.query-form {
  margin-bottom: 16px;
}
</style>
